{include file="public/header" /}
<link rel="stylesheet" href="/static/index/css/page/remit.css">
<body>
<div class="build-navbar" data-title="我要充值" data-right="充值记录,{:url('remit/record')}"></div>

<div class="main">
    <div class="balance flex flex-col">
        <div class="title">账户余额</div>
        <div class="amount front">8475.60</div>
    </div>
    <form class="layui-form" action="{:url('remit/save')}" lay-filter="lay-form">
        <div class="pay_way m-30">

            <div class="title">支付方式</div>
            <input type="hidden" name="pay_way" class="pay_way" value="alipay"/>
            <div class="vessel flex justify-around items-center">
                <div class="radius-20 lay-this item flex flex-col justify-center items-center" data-val="alipay"
                     lay-change="pay_way">
                    <img src="/static/index/images/payment/alipay.png" alt="" class="icon"/>
                    <span>支付宝</span>
                </div>

                <div class="radius-20 item flex flex-col justify-center items-center" data-val="wechat"
                     lay-change="pay_way">
                    <img src="/static/index/images/payment/wechat.png" alt="" class="icon"/>
                    <span>微信</span>
                </div>

                <div class="radius-20 item flex flex-col justify-center items-center" data-val="bank"
                     lay-change="pay_way">
                    <img src="/static/index/images/payment/bank.png" alt="" class="icon"/>
                    <span>银行卡</span>
                </div>
            </div>

            <div class="show mt-30 radius-20">
                <div class="bank">
                    <div class="flex items-center justify-between">
                        <div class="flex-1">
                            <div class="card-no line-1 copy_content">{:cache('system')['remit_bank_number']}</div>
                            <div class="val">
                                <span class="bank-name">{:cache('system')['remit_bank_name']}</span>
                                <span class="bank-account">{:cache('system')['remit_bank_account']}</span>
                            </div>
                        </div>
                        <div lay-click="copy" class="copy" data-clipboard-action="copy"
                             data-clipboard-target=".copy_content">复制卡号
                        </div>
                    </div>
                </div>
                <div class="qrcode flex flex-col justify-center items-center">
                    <img src="{:cache('system')['remit_alipay']}" alt="" lay-event="photo"/>
                    <span class="mt-30">请扫码支付</span>
                </div>
            </div>

            <div class="col flex  flex-col py-30">
                <div class="top">充值金额</div>
                <div class="bottom">
                    <input type="number" name="amount" placeholder="请填写充值金额" lay-verify="req"
                           autocomplete="off"/>
                </div>
            </div>
            <div class="col flex  flex-col mt-30">
                <div class="top">支付凭证</div>
                <div class="bottom">
                    <div class="build-uploads"
                         data-url="{:url('uploads/uploadImage')}"
                         data-name="images"
                         data-accept="images"
                         data-max="1"
                    ></div>
                </div>
            </div>
        </div>
        <div class="btn theme-btn radius-14" lay-event="formSubmit">确认充值</div>
    </form>
</div>

</body>
{include file="public/footer"/}
<script src="/static/index/js/clipboard.min.js"></script>
<script>
    layui.use(['methods'], function () {
        var m = layui.methods, a = layui.jquery, ly = layui.layer, l = layui.listen;
        m.event.change('pay_way', function (data, that) {
            if (data.val === 'bank') {
                a('.bank').show();
                a('.qrcode').hide();
            } else {
                var mix = {alipay: "{:cache('system')['remit_alipay']}", wechat: "{:cache('system')['remit_wechat']}"};
                a('.bank').hide();
                a('.qrcode').find('img').attr('src', mix[data.val])
                a('.qrcode').show();
            }
            a('.pay_way').val(data.val);
        });
        m.event.click('copy', function () {
            new ClipboardJS('.copy');
            ly.msg('已复制');
        })


    });
</script>
</html>